<template>
<div  class="mui-content mui-scroll-wrapper" style="padding-top: 0px;padding-bottom:50px;">
  <header class="mui-bar mui-bar-nav bg-color" style="z-index:999;p">
    <span  class="iconfont icon-fanhui header_fanhui" @tap="goback"></span> 
    <span class="mui-icon mui-icon-search mui-pull-left header_search" style="display: none;"></span> 
    <h1 class="mui-title">确认拼单</h1> 
  </header>
  <!-- 二维码容器 -->
  <div  id="bcid"  class="abs-top" :class="barCodeStatus?'abs-top-active':''" v-if="barCodeStatusIf"></div>
  <div class="mui-scroll" style="margin-top:44px;padding-bottom: 44px;" v-show="!userInfoStatus&&!barCodeStatus&&!paymentStatus">
    <!-- 横线分隔条 -->
    <cross-line></cross-line>
    <ul style="background: #fff;" @tap="goUserInfo">
      <img src="static/img/di.png" style="position:absolute;width:100%"/>
      <li class="mui-table-view-cell" style="padding-top: 20px;">  
        <div>
          <span class="icon-dingw"></span>
          <div class="address-info">
            <div class="address-text">
              <span class="address-name">{{$store.getters.user.name}}</span>
              <span style="margin-left:30px;font-size:13px;">{{$store.getters.user.mobile}}</span>
            </div>
            <span class="usertit">地址:</span> 
            <span  class="userpams">{{$store.getters.user.area+$store.getters.user.address}}</span>
          </div>
          <span  class="i-c icon-you-01"></span>
        </div>
      </li>
    </ul>
    <!-- 车型图 -->
    <ul class="mui-table-view mui-table-view-chevron">
      <li>
        <!-- 横线分隔条 -->
        <cross-line></cross-line>
        <div class="lstTop">
          <div  class="titpic">
            <img  src="static/img/hqgic.png" alt="" style="float: left;">
            <span style="float: left; color: rgb(51, 51, 51);">江苏环球港汽车城</span>
          </div>
        </div> 
        <div class="lst">
          <div  class="lstImg"  v-if="currentCar.seriesPic == null">
            <img :src="noCarPic">
          </div> 
          <div  class="lstImg"  v-else>
            <img :src="$store.state.appData.imgUrl+currentCar.seriesPic">
          </div> 
          <div class="lstMsg">
            <p  class="carName">{{currentCar.name}}</p> 
            <p  class="carColor">颜色:<span>{{activeOutColor}}</span></p> 
            <p  class="carColor">指导价:{{currentCar.guidePrice}}万起 </p>
          </div>
        </div> 
      </li>
      <!-- 颜色 -->
      <li class="mui-table-view-cell mui-media li-height">
        <a class="mui-navigate-right"  @tap="switchColor">
          颜色选择<span class="active-right" :class="activeOutColor == '必选'?'red-color':''">{{activeOutColor}}</span>
        </a>
        <div  class="list" v-show="colorStatus">
          <li v-for="color in outColor">
            <button type="button" :title="color" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeCarColor(color)" class="mui-btn mui-btn-outlined carColor"
            :class="activeColor(color)">{{color}}</button>
          </li>
          <li>
            <button type="button" title="''" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeCarColor('')" class="mui-btn mui-btn-outlined carColor"
            :class="activeColor('')">不限</button>
          </li>
        </div>
      </li>
       <!-- 上牌地点 -->
      <li class="mui-table-view-cell mui-media li-height">
        <a class="mui-navigate-right"  @tap="switchRegPlace">
          上牌地点<span class="active-right" :class="activePlace == '必选'?'red-color':''">{{activePlace}}</span>
        </a>
        <div  class="list" v-show="regPlaceStatus">
          <li v-for="regPlace in regPlaceList">
            <button type="button" :title="regPlace" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeRegPlacer(regPlace)" class="mui-btn mui-btn-outlined carColor"
            :class="handleActivePlace(regPlace)">{{regPlace}}</button>
          </li>
        </div>
      </li>
      <!-- 购买保险 -->
      <li class="mui-table-view-cell mui-media li-height">
        <a class="mui-navigate-right"  @tap="switchIsSurance">
          购买保险<span class="active-right" :class="activeSurance == '必选'?'red-color':''">{{activeSurance}}</span>
        </a>
        <div  class="list" v-show="isSuranceStatus">
          <li>
            <button type="button"  style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeIsSurance(1)" class="mui-btn mui-btn-outlined carColor"
            :class="handleIsSurance(1)">是</button>
          </li>
           <li>
            <button type="button" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeIsSurance(0)" class="mui-btn mui-btn-outlined carColor"
            :class="handleIsSurance(0)">否</button>
          </li>
        </div>
      </li>
      <!-- 申请贷款 -->
      <li class="mui-table-view-cell mui-media li-height">
        <a class="mui-navigate-right"  @tap="switchIsLoan">
          申请贷款<span class="active-right" :class="activeLoan == '必选'?'red-color':''">{{activeLoan}}</span>
        </a>
        <div  class="list" v-show="isLoanStatus">
          <li>
            <button type="button"  style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeIsLoan(1)" class="mui-btn mui-btn-outlined carColor"
            :class="handleIsLoan(1)">是</button>
          </li>
           <li>
            <button type="button" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" @click="activeIsLoan(0)" class="mui-btn mui-btn-outlined carColor"
            :class="handleIsLoan(0)">否</button>
          </li>
        </div>
      </li>
      <!-- 购车时间 -->
      <li class="mui-table-view-cell"   @tap="showDate()">
        <a  class="mui-navigate-right"  style="font-size: 14px;">
          <label class="justify" style="margin-left:5px;">购车时间</label>
          <span style="margin-left:13px;color:#333333"  v-if="crowdData.buyTimeStr">{{crowdData.buyTimeStr}}</span>
          <span style="margin-left:13px;color:#989898"  v-else>请选择意向购车时间</span>
        </a>
      </li>
      <!-- <li class="mui-table-view-cell mui-media li-height">
        <a class="mui-navigate-right">
        现金券：<span class="active-right">暂无可用</span>
        </a>
      </li> -->
      <li style="margin:0px 0px 0px 15px;">
          <div class="mui-input-row" style="border-bottom:0.5px solid #c8c7cc;">
              <label style="min-width:70px;padding-left:5px;">期望价格</label>
              <form id="number_form" style="width:70%;">
                  <input style="padding:8px 0px 10px 8px ;font-size:0.7rem;" name="number" type="text"  maxlength="8"  v-model="crowdData.preferential" class="mui-input-clear" placeholder="请输入期望价格(裸车价/元)">
                  <error v-show="validated_status"></error>
              </form>
          </div>
      </li>
      <li style="margin:0px 10px 0px 15px;">
          <div class="mui-input-row">
              <label style="min-width:75px;padding-left:5px;">用户备注</label>
              <!-- <v-edit-div  style="padding:12px 0px 10px 10px ;font-size:0.7rem;float:left;width:65%" class="adaptive_box"  placeholder="选填:用户可留言" v-model="crowdData.remark"></v-edit-div> -->
              <input style="padding:8px 0px 10px 10px ;font-size:0.7rem;float:left;width:65%" maxlength='200' v-model="crowdData.remark"  type="text" class="mui-input-clear" placeholder="选填:用户可留言">
          </div>
      </li>
    </ul>
    <!-- 横线分隔条 -->
    <cross-line></cross-line>
    <!-- 二维码扫描 -->
    <ul class="mui-table-view mui-table-view-chevron"  @tap="goBarCodeStatus">
      <li class="mui-table-view-cell" > 
        <a >
          <span class="iconfont icon-22"></span>扫描导购二维码
          <span class="active-color">{{salerIdStatus}}</span>
        </a>
      </li>
    </ul>
    <!-- 横线分隔条 -->
    <cross-line></cross-line>
    <!-- 询价规则，法律条款 -->
    <rules :rulesData="rulesData" v-on:switchRulesCheckStatus="switchRulesCheckStatus"></rules>
    <!-- 横线分隔条 -->
    <cross-line></cross-line>
  </div>
  <nav class="mui-bar mui-bar-tab footer" v-show="!userInfoStatus&&!barCodeStatus&&!paymentStatus">
    <div class="inquiry-amount">应付询价保证金:
      <span class="red">￥{{initPrice(crowdPrice)}}</span>
    </div>
    <div class="go-payment" :class="confirm ? 'abled' : 'disabled'" @tap.self="goPayment">
      去付款
    </div>
  </nav>
  <!-- 用户信息组件 -->
  <userInfo v-show="userInfoStatus" :userInfoStatus="userInfoStatus" @userInfoStatus="handleUserInfoStatus"  @user="handleUserInfo"></userInfo>
  <!-- 扫码组件 使用v-show等方法无法拆分-->
  <!-- <bar-code ref="bc" :class="barCodeStatus? 'abs-top':'abs-bottom'"  :barCodeStatus="barCodeStatus" @barCodeStatus="handleBarCodeStatus"></bar-code> -->
  <div v-show="barCodeStatus">
    <header class="mui-bar mui-bar-nav">
        <a class="iconfont icon-fanhui header_fanhui" @tap="switchUserInfoStatus" style="margin-top:0px;"></a>  
        <h1 class="mui-title" >扫一扫</h1> 
        <span  class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>   
    </header>
		<div class="mui-bar mui-bar-footer" style="padding: 0px;">  
        <div class="fbt" @click="scanPicture()">从相册选择二维码</div>  
        <div class="fbt" @tap="switchUserInfoStatus">取　 消</div>  
    </div>  
  </div>
  <!--支付组件-->
  <payment v-if="paymentStatus" :crowdData="crowdData" :paymentStatus="paymentStatus" @paymentStatus="handlePaymentStatus"></payment>
</div>
</template>
<script>
import mui from "static/js/mui";
import CrossLine from "@/components/base/cross-line/cross-line"
import userInfo from '@/components/filter/models-offer/user-info/user-info'
import payment from '@/components/filter/models-offer/confirm-crowd/payment/payment'
import rules from "@/components/base/rules-clause/rules-clause"
import Error from "@/components/base/form-status/error"
import { validatedMoney }from '@/utils/validator'
import {checkQRcode} from '@/api/order'
import {findByCarSriesId} from '@/api/confirmBidding'
import storage from "@/utils/localstorage"
import utils from '@/utils/utils'
import { Toast } from 'mint-ui'
import vEditDiv from '@/components/base/v-edit-div/v-edit-div'
export default {
  data() {
    return {
      biddingStatus: true,
      /* clauseStatus: false, */
      userInfoStatus: false,
      barCodeStatus: false,
      barCodeStatusIf: true,
      paymentStatus: false,
      regPlaceStatus: false,
      isSuranceStatus: false,
      isLoanStatus: false,
      salerIdStatus: '',
      validated_status: false,
      confirm: false,
      noCarPic:'static/img/noCarPic.png',
      currentCar:'',
      pics:'',
      outColor: [],
      regPlaceList: [],
      activeOutColor: '必选',
      activePlace: '必选',
      activeSurance: '必选',
      activeLoan: '必选',
      colorStatus: false,
      crowdPrice: 1,
      height: '',
      QRLock: false,
      //整合后端所需数据
      crowdData:{
        carId: '',
        customerId: '',
        preferential: '',
        color: null,
        remark: '',
        salerId: '',
        license: '',
        isSurance: '',
        isLoan: '',
        buyTime: '',
        buyTimeStr: ''
      },
      dateObj:{},
      //购车时间
      dateOptions:[
        {
          value: '604800000',
          text: '(一周内)'
        }, {
          value: '1209600000',
          text: '(两周内)'
        }, {
          value: '1814400000',
          text: '(三周内)'
        }, {
          value: '2419200000',
          text: '(四周内)'
        }
      ],
      //传入规则变量参数
      rulesData:{
        name:'拼单',
        clause: '',
        rule: ''
      },
      user:''
    };
  },
  props: {},
  watch: {
    crowdData: {
　　　handler(newValue, oldValue) {
        let that = this
        this.changeConfirm(that)
　　　},
　　　deep: true
　　}
  },
  methods: {
    showDate() {
      let that = this
      this.dateObj.show(function(items) {
        // console.log(items)
        let date = (new Date().getTime() + parseInt(items[0].value)) /1000
        that.crowdData.buyTimeStr = utils.time.formatDatetwo(date) + items[0].text/* utils.time.formatDateNew(date,'yyyy-MM-dd hh:mm:ss') */
        // that.reqData.buyTimeStr = items[0].text
        that.crowdData.buyTime = parseInt(items[0].value)
      });
    },
    goback(){
      history.go(-1)
    },
    switchRulesCheckStatus(status){
      this.biddingStatus = status
      this.changeConfirm(this)
    
    },
    init() {
      this.crowdPrice = storage.getLocalstorage('globalConfig')[5]
      this.rulesData.clause = storage.getLocalstorage('globalConfig')[2]
      this.rulesData.rule = storage.getLocalstorage('globalConfig')[1]
      this.regPlaceList = storage.getLocalstorage('globalConfig')[10].split("|")
      this.user = storage.getLocalstorage('user')
      if(this.user.address == null || this.user.mobile == null || 
        this.user.name == null || this.user.idCard == null  ){
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})	
        this.userInfoStatus = true
      }
      if(this.user.address == '' || this.user.mobile == '' || 
        this.user.name == '' || this.user.idCard == ''  ){
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})	
        this.userInfoStatus = true
      }
    },
    initPrice(formartPrice) {
      let price = utils.formatMoney(formartPrice,2)
      return price
    },
    back() {
      this.$router.push({
        path: "/index"
      });
    },
    switchColor() {
      this.colorStatus = !this.colorStatus
    },
    goBarCodeStatus() {
      /**  
       * 关闭软键盘
       */  
      document.activeElement.blur(); 
      if(!this.QRLock){
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})
        this.barCodeStatus = true
        if(window.plus){
          this.plusReady();
        }
      }else{
        mui.alert('本功能只能在车城现场使用','','','','div')
      }
    },
    goUserInfo() {
      this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})		
      this.userInfoStatus = true		
    },
    goPayment() {
      if (this.confirm == true) {
        // 是否是金钱,必须是字符串
        if(validatedMoney(this.crowdData.preferential)){
          this.validated_status = false
        }else{
          this.validated_status = true
          Toast('期望价格不是合法的')
          return
        }
        //不能小于报价的50%且不能大于指导价
        let min = parseFloat(this.currentCar.guidePrice)*10000 * 0.5
        let max = parseFloat(this.currentCar.guidePrice)*10000
        if(min > parseInt(this.crowdData.preferential) || max < parseInt(this.crowdData.preferential)) {
            this.validated_status = true
            Toast('期望价格有误')
            return
        }
        // 过滤备注
        if(this.crowdData.remark.length > 100){
          Toast('用户备注不能大于100字符')
          return 
        }
        this.crowdData.remark = utils.str.matchReg(this.crowdData.remark,'phone')
        this.$store.dispatch('updateNavbarStatus', { isShowHead: false, isShowFoot: false})
        //去掉该死的二维码容器
        this.barCodeStatusIf = false
        this.paymentStatus = true
      }else{
        let msg = ''
        /* if(!this.clauseStatus){
          msg = msg +'请勾选法律条款,'
        } */
        if(!this.biddingStatus){
          msg = msg +'请勾选拼单规则,'
        }
        if(this.crowdData.customerId === ''){
          msg = msg +'请填写用户ID,'
        }
        if(this.crowdData.carId === ''){
          msg = msg +'请填写身份证,'
        }
        if(this.crowdData.color === null){
          msg = msg +'请选择颜色规格,'
        }
        if(this.crowdData.preferential ===''){
          msg = msg +'请填写期望价格,'
        }
        if(this.crowdData.license === ''){
          msg = msg +'请选择上牌地点,'
        }
        if(this.crowdData.isSurance === ''){
          msg = msg +'请选择是否买保险,'
        }
        if(this.crowdData.isLoan === ''){
          msg = msg +'请选择是否贷款,'
        }
        if(!this.crowdData.buyTimeStr){
          msg = msg +'请选择购车时间,'
        }
        if(this.user.address == null || this.user.mobile == null || 
        this.user.name == null || this.user.idCard == null  ){
          msg = msg +'用户信息不完整,'
        }
        if(this.user.address == '' || this.user.mobile == '' || 
        this.user.name == '' || this.user.idCard == ''  ){
          msg = msg +'用户信息不完整,'
        }
        msg = msg.substring(0,msg.length-1)
        if(msg){
          Toast(msg)
        }
      }
    },
    getParams() {
      //获取路由参数'
      let routeVal = this.$route.params
      if(JSON.stringify(routeVal)!=="{}"){
        if(typeof(routeVal.currentCar) !== 'undefined'){
          console.log(routeVal.currentCar)
          this.currentCar = routeVal.currentCar
          this.crowdData.carId =  this.currentCar.id
          this.crowdData.customerId =  this.$store.getters.user.id
          //图片
          // //console.log(routeVal.pics)
          // this.pics = routeVal.pics
        }
      }
    },
    getColor() {
      findByCarSriesId(this.currentCar).then(response => {
        this.outColor = response.data.outColor
        // //console.log(response.outColor)
      })
    },
    activeCarColor(color) {
      if(color == ''){
        this.activeOutColor = '已选择不限'
      }else{
        this.activeOutColor = '已选择'+color
      }
      this.colorStatus = false
      this.crowdData.color =  color
    },
    activeRegPlacer(place) {
      this.activePlace = '已选择'+place
      this.regPlaceStatus = false
      this.crowdData.license =  place
    },
    activeIsLoan(isLoan){
      if(isLoan == 1){
        this.activeLoan = '已选择是'
      }else{
        this.activeLoan = '已选择否'
      }
      this.isLoanStatus = false
      this.crowdData.isLoan = isLoan
    },
    activeIsSurance(isSurance){
      if(isSurance == 1){
        this.activeSurance = '已选择是'
      }else{
        this.activeSurance = '已选择否'
      }
      this.isSuranceStatus = false

      this.crowdData.isSurance = isSurance
    
    },
    handleUserInfoStatus(data) {
      let that = this
      this.userInfoStatus = data;
      this.changeConfirm(that)
    },
    handleUserInfo(data){
      this.user = data;
    },
    handleBarCodeStatus(data) {
      this.barCodeStatus = data;
    },
    handlePaymentStatus(data){
      this.paymentStatus = data;
    },
    switchUserInfoStatus() {
      //关闭控件
      try{
        window.scan.close();
      }catch(err){
          //console.log('逻辑错误')
      }
      this.$store.dispatch('updateNavbarStatus', { isShowHead: true, isShowFoot: false})
      this.barCodeStatus = !this.barCodeStatus
      plus.key.addEventListener("backbutton",function(){
      });
      //this.$emit('barCodeStatus', !this.barCodeStatus);
    },
    plusReady (){
      try{  
        let that = this
        var filter;  
        //自定义的扫描控件样式  
        var styles = {frameColor: "#29E52C",scanbarColor: "#29E52C",background: ""}  
        //扫描控件构造  
        window.scan = new plus.barcode.Barcode('bcid',filter,styles);  
        scan.onmarked = this.onmarked;   
        scan.onerror = this.onerror;  
        scan.start();  
        //打开关闭闪光灯处理  
        var flag = false;  
        document.getElementById("turnTheLight").addEventListener('tap',function(){  
            if(flag == false){  
              scan.setFlash(true);  
              flag = true;  
            }else{  
              scan.setFlash(false);  
              flag = false;  
            }  
        });  
        plus.key.addEventListener("backbutton",function(){
          that.switchUserInfoStatus()
        });
      }catch(e){  
        alert("出现错误啦:\n"+e);
      }  

    },
    // 错误信息弹窗
    onerror(e) {
       alert(e);
    },
    // 解析二维码后回调此方法
    onmarked(type, result, file){
      //相册读取会有双引号，需要去除
      result = result.replace(/\"/g, "");
      switch(type){
        case plus.barcode.QR:
        type = 'QR';
        break;
        case plus.barcode.EAN13:
        type = 'EAN13';
        break;
        case plus.barcode.EAN8:
        type = 'EAN8';
        break;
        default:
        type = '其它'+type;
        break;
      }
     //采集导购码
      if((result.substring(0,2) === 'DG')){
        let Base64 = require('js-base64').Base64
        let salerId = Base64.encode(result.substring(2,result.length))
        checkQRcode({'QRcode': salerId}).then(res=>{
          if(res.msg == 'success'){
            this.crowdData.salerId = salerId
            this.salerIdStatus ='已扫描'+res.data.salerName
            this.crowdPrice = res.data.shareBill_orderPrice

            mui.alert('导购员:'+res.data.salerName, '', ['确定'],function() {},'div');
          }else{
            this.crowdData.salerId = ''
            this.salerIdStatus =''
          }
        })
      }else{
         mui.alert('扫描的是无效导购二维码','温馨提醒', ['确定'],function() {},'div')
      }
      this.switchUserInfoStatus()
    },
    scanPicture() {
      var that = this
      plus.gallery.pick(function(path){
        plus.barcode.scan(path,that.onmarked,function(error){
        plus.nativeUI.alert('无法识别此图片');
      });
      }, function(err){
          //console.log('Failed: '+err.message);
      });
    },
    changeConfirm(that){
      if(that.biddingStatus == true &&
        that.crowdData.customerId !=='' && that.crowdData.carId !== '' &&
        that.crowdData.color !==null && that.crowdData.preferential !== ''&& 
        that.crowdData.license !=='' && that.crowdData.isSurance !=='' 
        && that.crowdData.isLoan !=='' && that.crowdData.buyTimeStr !=='') {
          if(that.user.address == null || that.user.mobile == null || 
            that.user.name == null || that.user.idCard == null  ){
            that.confirm = false;
            return
          }
          if(that.user.address == '' || that.user.mobile == '' || 
            that.user.name == '' || that.user.idCard == ''  ){
            that.confirm = false;
            return
          }
          that.confirm = true;

      } else {
        that.confirm = false;
      }
    },
    activeColor(color) {
      let text = '已选择'
      if(color == ''){
        text = text + '不限'
      }else{
        text = text + color
      }
      if(this.activeOutColor == text){
        return 'color-active'
      }
      return ''
    },
    handleActivePlace(value) {
      let placeText = '已选择'+ value
      if(this.activePlace == placeText){
        return 'color-active'
      }
      return ''
    },
    handleIsLoan(value){
      if(value == 1){
        var valName = '是'
      }else{
        var valName = '否'
      }
      let isLoanText = '已选择'+ valName
      if(this.activeLoan == isLoanText){
        return 'color-active'
      }
      return ''
    },
    handleIsSurance(value){
      if(value == 1){
        var valName = '是'
      }else{
        var valName = '否'
      }
      let isSuranceText = '已选择'+ valName
      if(this.activeSurance == isSuranceText){
        return 'color-active'
      }
      return ''
    },
    switchRegPlace(){
      this.regPlaceStatus = !this.regPlaceStatus
    },
    switchIsSurance(){
      this.isSuranceStatus = !this.isSuranceStatus
    },
    switchIsLoan(){
      this.isLoanStatus = !this.isLoanStatus
    }
  },
  components: { CrossLine, userInfo ,payment, Error, rules, vEditDiv },
  filters: {},
  computed: {},
  created() {
    // 时间检查
    let nowHour = utils.time.formatDatehh(new Date().getTime()/1000)
    if(nowHour>16 ||  nowHour<9){
      mui.alert('为了给您最具时效性的报价，建议您在9:00~17:00间下单','温馨提醒', ['确定'],function() {},'div')
    }
    // 检查用户信息是否完整
    this.init()
    // 获取路由参数
    this.getParams()
    // 获取车颜色
    this.getColor()
  },
  mounted() {
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
        history.go(-1)
    }
    // 竖向滚动
    scroll = mui('.mui-scroll-wrapper').scroll({
        scrollY: true, // 是否竖向滚动
        scrollX: false, // 是否横向滚动
        startX: 0, // 初始化时滚动至x
        startY: 0, // 初始化时滚动至y
        indicators: true, // 是否显示滚动条
        deceleration: 0.0006, // 阻尼系数,系数越小滑动越灵敏
        bounce: false // 是否启用回弹
    });
    let that = this;
    /* mui(".clause").on("change", "input", function() {
      let status = this.checked ? true : false;
      if (this.value == "bidding") {
        that.biddingStatus = status;
      }
      that.changeConfirm(that)
    }); */
    this.height = document.body.clientHeight;
    window.onresize = function temp() {
     
      if(that.height >document.body.clientHeight){
        that.QRLock = true
      }else{
        that.QRLock = false
      }
    }
    // 初始化日期
    this.dateObj = new mui.PopPicker({
        layer: 1
    });
    this.dateObj.setData(this.dateOptions);
  },
  destroyed(){
    window.onresize = null;
    //抓报错
    if(window.sacn){
      window.scan.close()
      window.sacn = null
    }
  }
};
</script>
<style lang="scss" scoped>
/*车型选择*/
.mui-input-row label {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.1;
  float: left;
  padding: 12px 0px 10px 3px;
  font-size: 0.7rem;
}
.mui-input-row label ~ input {
  float: left;
  padding-left: 3px !important;
}
.mui-input-row label {
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
      line-height: 1.1;
      float: left;
      width:15%;
      padding:12px 0px 10px 0px;
      font-size:0.7rem;
}
.mui-input-row label ~ form,.mui-input-row label ~ form input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
    float: left;
    width:85%;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
}
.lstTop {
  width: 100%;
  background: #fff;
  font-size: 0.6rem;
  line-height: 36px;
  .titpic {
    overflow: hidden;
    padding: 0px 12px 0px 8px;
    img {
      width: 36px;
      height: 36px;
      margin-right: 5px;
      margin-top: 3px;
    }
  }
}
.lst {
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
  padding: 10px 12px 0px 12px;
  .lstImg {
    width: 38%;
    float: left;
    height: 90px;
    background-color: #f5f5f5;
    text-align: left;
    img {
      height: 100%;
      vertical-align: middle;
    }
  }
  .lstMsg {
    width: 62%;
    float: left;
    height: 100%;
    padding: 6px 0px 5px 15px;
    p {
      text-overflow: ellipsis;
      overflow: hidden;
      word-wrap: break-word;
      word-break: normal;
      margin-bottom: 10px;
    }
  }
}
.mui-table-view-cell {
  font-size: 14px;
}
.mui-table-view-cell:before {
  height: 1px !important;
}

.mui-navigate-right:after {
  transform: rotate(90deg);
  font-size: 0.9rem;
}

.icon-22 {
  color: #b2b2b2;
  margin-right: 10px;
  margin-left: 4px;
  position: relative;
  top: 3px;
  font-size: 20px;
}

.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after {
  top: 35% !important;
}
/* 底部询价 */
.mui-bar {
  box-shadow: 0 0 1px #d2d2d2;
}
.inquiry-amount {
  height: 50px;
  width: 70%;
  line-height: 50px;
  padding-left: 23px;
  font-size: 16px;
  display: inline-block;
  float: left;
}
.red {
  color: #ff6a27;
}
.go-payment {
  height: 50px;
  width: 30%;
  line-height: 50px;
  font-size: 16px;
  display: inline-block;
  float: left;
  text-align: center;
}
.abled {
  background-color: #ff6a27;
  color: #fff;
}
.disabled {
  background-color: #b2b2b2;
  color: #fff;
}
.footer{
  background-color: #fff;
  border-bottom: 0px solid #ddd;
  border-top: 1px solid #ddd;
}
/* 颜色列表 */
.list {
  width: 108%;
  margin-top: 10px;
  position: relative;
  left:-10px;
}
.list li {
  float: left;
  width: 33.33%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
}
.carColor {
  font-size: 0.6rem;
  line-height: 15px;
  width: 100%;
  color:#333333;
}
.carColor:hover{
  background: none;
  color:#333333;
}
.carPrice {
  font-size: 0.6rem;
  line-height: 15px;
  color:#ff6a27;
}
.carName {
  font-size: 0.7rem;
  color: #333;
  line-height: 15px;
  height: 28px;
}
//地址
.icon-dingw{
  display: inline-block;
  font-size:20px;
  float:left;
  padding-top:10px;
}
.address-info{
  display: inline-block;
  margin-left:10px;
  width:80%
}
.address-name{
  font-size:14px;
}
.mui-table-view-cell:last-child:after {
    height: 0;
}
.i-c {
  float:right;
  font-size: 1.1rem;
  height:100%;
  padding-top:10px;
  position: relative;
}
.userpams{
  font-size:12px;
}
.active-right{
  position: absolute;
  right:40px;
}
.red-color{
  color:#ff6a27;
}

.abs-top{
  width: 100%;
  position: absolute;
  top: 44px;
  background-color: #f5f5f5;
  bottom: 44px;
}
.abs-top-active{
   background-color: #000000!important;
}
.mui-icon{
   padding-top: 5px!important;
 }
  #turnTheLight{
    height:44px;
    line-height: 44px;
    position: relative;
    top:-7px;
  }
  .fbt:active {
  	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  }
  .mui-icon{
    padding-top: 10px; 
    padding-bottom: 10px; 
  }
  header{
    background-image:none!important;
    background:white;
  }
  .mui-title{
    color: #333333;
    font-size:18px;
  }
  
  .color-active{
    border:1px solid #ff6a27;
    color:#ff6a27;
  }
  .adaptive_box { 
    text-align:left; 
    line-height:16px; 
    font-size: 12px; 
    border: none; 
    padding: 0px; 
    background:#fff;
    min-height: 16px; 
    max-height: 300px; 
    margin-right: 0; 
    outline: 0; 
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: visible;
  }
  // header
.mui-bar {
  z-index:2;
  background-color: #fff;
  -webkit-box-shadow:none;
  box-shadow:none;
  border-bottom:1px solid #ddd;
}

.mui-bar-tab .mui-tab-item {
    height:60px;
}
.mint-tab-item-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 5px
}
.header_fanhui {
  line-height: 43px;
  font-size: 0.9rem;
}

.header-right {
  line-height: 44px;
  height: 44px;
  width:44px;
  padding-top: 0px!important;
  text-align: right;
  float: right;
  font-size:13px;
  color:#333;
}

</style>

